import Taro, { Component } from '@tarojs/taro';
import { View, Picker, Text, Button, Label } from '@doctorwork/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
// import CarNumber from '../../components/CarNumber/index';
import { rewriteAddMTA } from './../../model/utils/rewrite';
import { AtIcon } from 'taro-ui';
import './index.styl';

@connect(({ car }) => ({
    ...car
}))
@rewriteAddMTA
export default class Car extends Component {
    constructor(props){
        super(props);
        this.state = {
            showKeybord: false,
            id: '',
            number : '',
            oilType: '0',
            oilSelector: ['92号','95号','98号','93号','97号','0号']
        };
    }
    config = {
        navigationBarTitleText: '车辆管理',
        usingComponents: {
            'car-number': '../../components/CarNumber/index'
        }
    };
    

    componentDidShow() {
        this.props.dispatch({
            type : 'car/init'
        });
    }
    /**
     * 添加车辆
     * @param {*} addModal 
     */
    addModalState(addModal){
        this.setState({
            id: '',
            number: '',
            oilType: '0'
        });
        this.props.dispatch({
            type: 'car/save',
            payload: {
                addModal
            }
        });
    }
    /**
     * 编辑车辆
     * @param {*} car 
     */
    editCar(car){
        const oilType = [92,95,98,93,97,0].indexOf(car.oilType);
        this.setState({
            id: car.id,
            number: car.carNumber,
            oilType: oilType
        });
        this.props.dispatch({
            type: 'car/save',
            payload: {
                addModal: true
            }
        });
    }

    deleteCar(id){
        const _this = this;
        wx.showModal({
            title: '提示',
            content: '确定要删除车辆么？',
            success (res) {
                if (res.confirm) {
                    _this.props.dispatch({
                        type : 'car/deleteCar',
                        payload : { id }
                    });
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
        
    }
    stopEvent(e) {
        e.stopPropagation();
    }
    /**
     * 打开输入车牌号键盘
     */
    showCarKeybord(){
        this.setState({
            showKeybord: true
        });
    }
    /**
     * 车牌号
     * @param {*} e 
     */
    onChange(e){
        const value = e.detail.value;
        console.log('value:',value);
        this.setState({
            number : value
        });
    }
    /**
     * 验证输入内容是否合法
     */
    validateInput(e){
        let value = e.detail.value;
        value = value.trim();
        if(!value) return;
        this.props.dispatch({
            type : 'car/valideInput',
            payload : {
                value
            }
        });
    }
    /**
     * 车别名
     * @param {*} e 
     */
    onTypeChange(e){
        const value = e.detail.value;
        this.setState({
            oilType : value
        });
    }

    addCar(){
        let {id,number,oilType,oilSelector} = this.state;
        if(!number){
            return wx.showToast({
                title: '请输入车牌号！',
                icon: 'none'
            });
        }
        oilType = oilSelector[oilType];
        oilType = Number(oilType.split('号')[0]);
        this.props.dispatch({
            type : 'car/addCar',
            payload : {
                id,
                number,
                oilType
            }
        });
    }
    closeKeybord(){
        this.setState({showKeybord: false});
    }
    /**
     * 车牌号输入完毕
     * @param {*} e 
     */
    carInputFinish(e){
        console.log('车牌号:', e.detail);
        this.setState({
            number: e.detail,
            showKeybord: false
        });
    }
    render() {
        const {showKeybord, oilType, oilSelector,number,id} = this.state;
        const {list=[],addModal} = this.props;

        return (
            <View className='container'>
                <Navigate
                    title='我的汽车'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                {
                    showKeybord && <car-number onClose={this.closeKeybord.bind(this)} onFinish={this.carInputFinish.bind(this)} />
                }
                
                <View className='car-list'>
                    {
                        list.map((item,index) => (
                            <View className='car-item' key={index} >
                                <View>
                                    <View className='car-title'> {item.carNumber}</View>
                                    <View className='car-desc'> 汽油型号: {item.oilType}#</View>
                                </View>
                                <View className='car-edit' onClick={this.editCar.bind(this, item)} data-name='编辑'> 编辑 </View>
                                <View className='car-del' onClick={this.deleteCar.bind(this, item.id)} data-name='删除'> 删除 </View>
                                
                            </View>
                        ))
                    }
                    <View className='car-item' onClick={this.addModalState.bind(this,true)} data-name='添加车辆'>
                        <View className='car-add'>
                            <Text className='iconfont icon-right car-add-btn' >&#xe621;</Text>
                        </View>
                    </View>
                </View>
                {
                    addModal ? <View className='delete-modal' onClick={this.addModalState.bind(this, false)} data-name='关闭弹窗'>
                        <View className='content' onClick={this.stopEvent.bind(this)} data-name='阻止事件冒泡'>
                            <View className='title'>
                                {id ? '编辑车辆': '添加车辆'} 
                            </View>
                            <View className='desc'>
                                <Label className='input-desc'>车牌号: </Label>
                                <View className='input-content' onClick={this.showCarKeybord.bind(this, true)} data-name='打开键盘'>{number || '点击输入车牌号'} 
                                    <AtIcon value='chevron-right' size='20' color='#888' style='float: right;'></AtIcon>
                                </View>
                            </View>
                            <View className='desc'>
                                <Label className='input-desc'>油号: </Label>
                                <Picker mode='selector' className='input-content' value={oilType}  range={oilSelector} onChange={this.onTypeChange}>
                                    {oilSelector[oilType]|| '请选择汽油型号'}
                                    <AtIcon value='chevron-right' size='20' color='#888' style='float: right;'></AtIcon>

                                </Picker>
                            </View>
                            <View className='btn'>
                                <Button className='cancel' onClick={this.addModalState.bind(this, false)} data-name='取消'>
                                    取消
                                </Button>
                                <Button className='sure' onClick={this.addCar.bind(this)} data-name='确认'> 确认  </Button>
                            </View>
                        </View>
                    </View> : null
                }
            </View>

        );
    }
}
